<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档事件</title>
</head>
<body onclick="getClick('body元素')">
<form id="d" action="http://www.baidu.com" method="get" onsubmit="return validate()">
	<input name="user" type="text" onblur="alert('失去焦点')"><br>
	<input name="pass" type="password"><br>
	<select id="color" name="color" onchange="alert('值发生改变')">
		<option value="red">红色</option>
		<option value="blue">蓝色</option>
	</select><br>
	<input type="submit" value="登录"/>
</form>
<script type="text/javascript">
	//表单验证
	function validate(){
		var form=document.getElementById("d");

		if(form.user.value==''){
			alert('用户不能为空');
			return false;
		}

		if(form.pass.value==''){
			alert('密码不能为空');
			return false;
		}

		return true;
	}

	//事件冒泡
	var getClick=function(who){
		var result=document.getElementById("result");
		result.innerHTML+=who+"被点击了<br> "

		event.cancelBubble=true;//阻止事件追溯

		//事件重定向
		//document.getElementById("forward").fireEvent('onClick',event);

		alert(event.clientX+"/"+event.clientY+"/"+event.button+"/"+event.ctrlKey+"--"+event.screenX+"/"+event.screenY);
	}
</script>
 
 <table border="1" onclick="getClick('table元素')">
 	<tr onclick="getClick('tr元素')">
 		<td onclick="getClick('td元素')">
 			<p onclick="getClick('p元素')">
 				<!-- event.cancelBubble=true;阻止事件追溯 -->
 				<input type="button" value="单击我" onclick="getClick('按钮');">
 			</p>
 		</td>
 	</tr>
 </table>
 <input type="button" id="forward" value="被转发的按钮" onclick="getClick('被转发的按钮');">
 <div id="result" style="width:500px;height:500px;border:1px solid blue;" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';"></div>
 
</body>
</html>